<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 500px;
			}

			div {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				
				/* 3D转换的移动相较于2D 写法上多了个X Y 或Z的后缀 */

				/* transform: translateX(20px); */
				/* transform: translateY(20px); */

				/* 几个属性一起写就采用空格隔开 */
				/* transform: translateX(20px) translateX(20px) translateZ(20px); */

				/* 
				1.translateZ沿着z轴移动
				2.translateZ后面一般跟单位px
				3.pxtranslateZ(20px); 是向屏幕外移动20px,向我们眼睛的方向 */

				/* translate3D有简写方法  属性用逗号隔开*/
				transform: translate3d(400px, 20px, 20px);
				/* 如果想去掉某个方向的位移可以把它设置为0，但是不可以省略 */

			}
		</style>
	</head>
	<body>
		<h2>学习3D转换首先需要把坐标轴弄清楚</h2>
		<ul>
			<li>x轴 水平向右是正方向</li>
			<li>y轴 垂直向下是正方向</li>
			<li>z轴 垂直屏幕向外是正方向</li>
			<!-- 为什么z轴向外是正 因为一个东西离我们眼睛越近越大，离我们眼睛越远越小 -->
		</ul>
		<br>
		<br>
		<div></div>
	</body>
</html>
